import React, { useMemo, useEffect } from 'react'
import { useGLTF } from '@react-three/drei'
import { type Object3D, Material, BufferGeometry } from 'three'
import { useModelAutoCenter } from '@/hooks/useModelAutoCenter'
import { useDragModel } from '@/hooks/useDragModel'
import { useInteraction } from './Scene'

interface ModelProps {
  /** 模型文件路径（Blob URL 或文件路径） */
  modelPath: string
  /** 模型在列表中的索引，用于计算初始位置偏移 */
  index: number
}

/**
 * 3D 模型组件
 * 负责加载和渲染 GLTF 模型，自动居中，并确保操作隔离
 * 
 * 特性：
 * - 每个模型独立的 useGLTF 实例
 * - 自动位置偏移避免重叠
 * - 组件卸载时自动清理资源
 */
export function Model({ modelPath, index }: ModelProps) {
  console.log('🚀 ~ Model 组件渲染，modelPath:', modelPath, 'index:', index)
  
  // 每个模型都有自己的 useGLTF 实例
  // useGLTF 会根据 URL 缓存，每个不同的 modelPath（Blob URL）都是独立实例
  const gltf = useGLTF(modelPath)
  console.log('🚀 ~ Model 加载完成，gltf:', gltf, 'scene:', gltf?.scene, 'scene.uuid:', gltf?.scene?.uuid)
  
  // 关键：克隆场景对象，确保每个组件有独立的场景实例
  // 这样可以避免多个 Model 组件共享同一个场景对象，实现操作隔离
  const clonedScene = useMemo(() => {
    if (!gltf.scene) return null
    // 克隆整个场景，包括所有子对象
    const cloned = gltf.scene.clone()
    console.log('🚀 ~ 克隆后的场景:', cloned, 'uuid:', cloned?.uuid)
    return cloned
  }, [gltf.scene])
  
  // 计算初始位置偏移，避免模型重叠
  // 每个模型在 X 轴上偏移 index * 3 个单位
  const positionOffset = useMemo(() => {
    return [index * 3, 0, 0] as [number, number, number]
  }, [index])

  const meshRef = useModelAutoCenter({
    model: clonedScene,
    enabled: !!clonedScene,
    positionOffset,
  })

  // 交互状态管理
  const { setIsDragging, controlsRef } = useInteraction()

  const { dragProps } = useDragModel({
    modelRef: meshRef,
    onDragStart: () => {
      // 立即禁用 OrbitControls（同步操作）
      if (controlsRef.current) {
        controlsRef.current.enabled = false
      }
      // 然后更新状态（异步操作，用于 UI 反馈）
      setIsDragging(true)
      document.body.style.cursor = 'grabbing'
    },
    onDragEnd: () => {
      // 恢复状态和 OrbitControls
      setIsDragging(false)
      if (controlsRef.current) {
        controlsRef.current.enabled = true
      }
      document.body.style.cursor = 'default'
    },
  })

  // 组件卸载时清理资源
  useEffect(() => {
    return () => {
      // 清理 useGLTF 的资源（包括纹理、几何体等）
      if (gltf) {
        console.log('🚀 ~ Model 卸载，清理资源:', modelPath)
        // useGLTF 会自动管理缓存，但我们可以手动清理克隆的场景
        if (clonedScene) {
          clonedScene.traverse((child: Object3D) => {
            // 清理几何体
            if ('geometry' in child && child.geometry instanceof BufferGeometry) {
              child.geometry.dispose()
            }
            // 清理材质
            if ('material' in child && child.material) {
              if (Array.isArray(child.material)) {
                child.material.forEach((mat: Material) => {
                  if (mat) mat.dispose()
                })
              } else if (child.material instanceof Material) {
                child.material.dispose()
              }
            }
          })
        }
      }
    }
  }, [gltf, clonedScene, modelPath])

  if (!clonedScene) return null

  return (
    <mesh ref={meshRef as React.Ref<Object3D>} {...dragProps}>
      <primitive object={clonedScene} />
    </mesh>
  )
}
